<template>
  <SortableList :items="items" @update:items="updateItems">
    <template #default="{ item }">
      <div class="item-content">{{ item.content }}</div>
    </template>
  </SortableList>
</template>

<script setup>
import { ref } from 'vue'
import SortableList from '@/components/SortableBox.vue'

const items = ref([
  { id: 1, content: 'Item 1' },
  { id: 2, content: 'Item 2' },
  { id: 3, content: 'Item 3' },
  { id: 4, content: 'Item 4' },
  { id: 5, content: 'Item 5' }
])

const updateItems = (newItems) => {
  items.value = newItems
}
</script>

<style>
.item-content {
  width: 100%;
  height: 100px;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
</style>
